<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/>

    <title>行情中心</title>
    <style>


        /*************股指**开始**************/
        .info-stock-wrap {
            background: rgba(255, 255, 255, 1);
            padding: .2rem .32rem .28rem .32rem;
        }

        .info-stock-proportion {
            background: rgba(255, 255, 255, 1);
            padding: 0 .32rem .2rem .32rem;
        }

        .info-stock-box {
            background: rgba(248, 248, 246, 1);
            width: 2.2rem;
            height: 1.4rem;
        }

        .info-stock-item {
            margin: 0 .24rem;
            height: 1.4rem;
        }

        .info-stock-name {
            color: rgba(34, 34, 34, 1);
            line-height: .34rem;
        }

        .info-stock-index {
            color: rgba(236, 62, 51, 1);
            line-height: .5rem;
            padding-top: 0.08rem;
            padding-bottom: 0.03rem;
        }

        .info-stock-increase {
            color: rgba(236, 62, 51, 1);
            line-height: .32rem;
        }

        .info-stock-drop {
            color: rgba(0, 174, 31, 1);
            line-height: .32rem;
        }

        .info-stock-line {
            max-width: 4.6rem;
            height: .12rem;
        }

        .info-stock-zcount {
            color: rgba(236, 62, 51, 1);
        }

        .info-stock-z {
            height: .12rem;
            background: rgba(236, 62, 51, 1);
            position: relative;
        }

        .info-stock-z:after {
            content: '';
            width: 0;
            height: 0;
            border-bottom: 0.12rem solid white;
            border-left: 0.06rem solid transparent;
            position: absolute;
            right: 0
        }

        .info-stock-p {
            height: .12rem;
            background: rgba(152, 148, 147, 1);
            transform: skewX(-25deg);
            margin-left: 0.05rem;
        }

        .info-stock-d {
            height: .12rem;
            background: rgba(0, 174, 31, 1);
            position: relative;
            margin-left: 0.05rem;
        }

        .info-stock-d:after {
            content: '';
            width: 0;
            height: 0;
            border-top: 0.12rem solid white;
            border-right: 0.06rem solid transparent;
            position: absolute;
            left: 0;
        }

        .info-stock-dcount {
            color: rgba(0, 174, 31, 1);
        }

        /*************股指**结束**************/

    </style>
</head>
<body>

<div class="flex-column h-100-p bg-white">
    <!--指数-->
    <div class="flex-column">
        <div class="flex-row justify-content-between info-stock-wrap"></div>
        <div class="flex-row justify-content-between align-items-center info-stock-proportion"></div>
    </div>
</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>


<script>
  let timerId
  let pm = {
    pageNum: 1,
    pageSize: 10,
    isScroll: true,
    title: '',
    code: '',
    timer: null
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()

    getStockInfo()
    startPage()
  }

  function reLoadPage() {
    getStockInfo()
    startPage()
  }

  function pausePage() {
    pm.timer && clearInterval(pm.timer)
  }

  function startPage(params) {
    pm.timer && clearInterval(pm.timer)
    pm.timer = setInterval(getStockInfo, dict.STOCK_REFRESH_TIME)
  }

  //获取股票行情数据
  function getStockInfo() {
    Server.infoIndex.getStockInfo({
      reqData: JSON.stringify({'clientType': 'other', 'clientVersion': '', 'type': 0})
    }).then(function (data) {
      let htmlStr = ''
      if (data.resultData && data.resultData.data && data.resultData.data.dataList) {
        data.resultData.data.dataList.forEach((item, i) => {
          htmlStr +=
            `<div class="flex-column info-stock-box" onclick="jumpStock('${item.stockCode}')">
                <div class="flex-column info-stock-item justify-content-center">
                    <div class="info-stock-name ff500 fspx12">${item.stockName}</div>
                    <div class="info-stock-index ` + (parseInt(item.change) >= 0 ? 'info-stock-increase' : 'info-stock-drop') + ` ff600 fspx18">${item.price}</div>
                    <div class="flex-row ff500 fspx11">
                        <div class=" ` + (parseInt(item.change) >= 0 ? 'info-stock-increase' : 'info-stock-drop') + ` mr10">${item.change}</div>
                        <div class=" ` + (parseInt(item.change) >= 0 ? 'info-stock-increase' : 'info-stock-drop') + `">${item.changeRatio}</div>
                    </div>
                </div>
             </div>`
        })
        $('.info-stock-wrap').html(htmlStr)

        let cnt = parseInt(data.resultData.data.dataCount[0]) + parseInt(data.resultData.data.dataCount[1]) + parseInt(data.resultData.data.dataCount[2])
        let htmlObj =
          `<div class="info-stock-zcount ff400 fs11">涨${data.resultData.data.dataCount[0]}家</div>
            <div class="flex-row flex-1 info-stock-line">
                <div class="info-stock-z" style="width: ` + (parseInt(data.resultData.data.dataCount[0]) * 100 / cnt) + `%"></div>
                <div class="info-stock-p" style="width: ` + (parseInt(data.resultData.data.dataCount[1]) * 100 / cnt) + `%"></div>
                <div class="info-stock-d" style="width: ` + (parseInt(data.resultData.data.dataCount[2]) * 100 / cnt) + `%"></div>
            </div>
            <div class="info-stock-dcount ff400 fs11">跌${data.resultData.data.dataCount[2]}家</div> `

        $('.info-stock-proportion').html(htmlObj)

      }
    })
  }

  function jumpStock(stockCode) {
    let obj = stockCode.split('-')
    goWordDetail({type: 6, exchange: obj[0], stockCode: obj[1]})
  }


</script>
</html>
